---
id: divider
title: Divider
category: 'data-display'
package: '@chakra-ui/layout'
description: Dividers are used to visually separate content in a list or group.
---

## Import

```js
import { Divider } from '@chakra-ui/react'
```

## Usage

The `Divider` displays a thin horizontal or vertical line, and renders a `hr`
tag.

```jsx
<Divider />
```

### Divider Orientation

Pass the `orientation` prop and set it to either `horizontal` or `vertical`.

```jsx
<Divider orientation='horizontal' />
```

If the vertical orientation is used, make sure that the parent element is
assigned a height.

```jsx
<Center height='50px'>
  <Divider orientation='vertical' />
</Center>
```

## Composition

```jsx
<Stack direction='row' h='100px' p={4}>
  <Divider orientation='vertical' />
  <Text>Chakra UI</Text>
</Stack>
```
